<template>
  <div>
    <div class="qup-title-box"><span class="border" /><span>卖场重点区域图片</span></div>
    <div v-if="!isDetail" style="padding-bottom:10px">
      <el-button size="mini" type="primary" @click.native="handleSave">保存</el-button>
      <el-button size="mini" type="primary" @click.native="handelQueryPatrolPicList()">取消</el-button>
    </div>
    <el-table
      :data="tableData"
      border
      max-height="700"
      :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
      style="width: 100%"
    >

      <el-table-column show-overflow-tooltip prop="belongDutyName" label="走访类别" />
      <el-table-column show-overflow-tooltip prop="acceptProblemName" label="走访区域" />
      <el-table-column min-width="250" label="图片">
        <template slot-scope="scope">
          <import-img
            :photo-list="scope.row.shopAttachmentDTOList"
            file-type="重点区域图片"
            :readonly="isDetail"
            :limited="50"
            :config-attachment-id="picConfigId"
          />
        </template>
      </el-table-column>

      <el-table-column show-overflow-tooltip prop="notes" label="补充说明">
        <template slot-scope="scope">
          <el-input v-model="scope.row.notes" :disabled="isDetail" type="textarea" size="mini" />
        </template>
      </el-table-column>

    </el-table>
    <div style="margin-bottom:60px">
      <div class="qup-title-box"><span class="border" /><span>卖场其他区域图片</span></div>
      <c-file-table-box
        v-model="otherFiles"
        :table-height="250"
        type-code="ACCESS106"
        :editable="!isDetail"
        belong-model="SHOP_INTERVIEW"
        :model-id="patrolId"
      />
    </div>

  </div>
</template>
<script>
import importImg from '@/components/importImg/miniUpload'
import { queryPatrolPicList, queryDutyList, savePatrolKeyArea } from '@/api/marketService/dailyPatrol'
export default {
  name: 'PatrolPic',
  components: { importImg },
  props: {
    patrolId: {
      type: String,
      default: ''
    },
    picConfigId: {
      type: String,
      default: ''
    },
    isDetail: {
      type: [Number, Boolean],
      default: false
    }
  },
  data() {
    return {
      otherFiles: [],
      tableData: []
    }
  },
  watch: {
    patrolId: {
      handler(v) {
        if (!v) return
        this.handelQueryPatrolPicList(v)
      },
      deep: true,
      immediate: true
    }
  },
  created() {
  },
  methods: {
    getData() {
      // this.handleSave()// 同时保重点区域列表数据
      return this.otherFiles.map(v => { return { ...v.response.data, modelId: this.patrolId } })
    },
    handelQueryDutyList() {
      queryDutyList('C').then(res => {
        if (res.success) this.tableData = res.data.map(v => { return { ...v, patrolId: this.patrolId, shopAttachmentDTOList: [] } })
      })
    },
    handleSave() {
      savePatrolKeyArea(this.tableData).then(res => {
        if (res.success) this.$message.success('保存成功')
      })
    },
    handelQueryPatrolPicList(patrolId) {
      queryPatrolPicList(patrolId || this.patrolId).then(res => {
        if (res.success && res.data.records.length) this.tableData = res.data.records
        else {
          this.handelQueryDutyList()
        }
      })
    }
  }
}
</script>
